<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;list-style: none;text-decoration: none;}
        nav{
            width: 100%;
            height: 50px;
            background-color: #abcdef;
            font-weight: 700;
            font-size: 25px;
        }
        ul{
            width: 80%;
            margin:0 auto;
        }
        nav>ul>li{
            float:left;
            line-height:50px;
            /*padding: 0 20px;*/
        }
        ul li:hover{
            background-color: #333;
        }
        li a{
            display:block;
            height:50px ;
            line-height:50px;
            padding:0 20px;
        }
        nav a:link{color:#f00;}
        nav a:hover{color:#fff;}
        .op li{
            font-size:20px;
            height:40px;
            font-weight:300;
            display:none;  /*默认 不显示*/
        }
        .select:hover .op li{
            color:#fff;
            display:block; /*选中时 才显示*/
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li class="select">
                <a href="#">电器</a>
                <ul class="op">
                    <li>电视</li>
                    <li>冰箱</li>
                    <li>空调</li>
                    <li>风扇</li>
                </ul>
            </li>
            <li><a href="#">家具</a></li>
            <li class="select"><a href="#">成人用品</a>
                <ul class="op">
                    <li>电视1</li>
                    <li>冰箱2</li>
                    <li>空调3</li>
                    <li>风扇4</li>
                </ul>
            </li>
            <li><a href="#">肾7</a></li>
        </ul>
    </nav>
</body>
</html>
